<template>
  <div class="model-service-settings space-y-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-foreground mb-2 flex items-center">
        <i class="i-mdi-cloud-outline mr-3 w-6 h-6" />
        {{ t('settings.menu.model') }}
      </h1>
      <p class="text-muted-foreground">{{ t('settings.model.description') }}</p>
    </div>

    <!-- 服务提供商配置 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-server-network mr-2 w-5 h-5" />
        {{ t('settings.model.provider') }}
      </h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div
          v-for="provider in providers"
          :key="provider.id"
          :class="[
            'p-4 border-2 rounded-lg cursor-pointer transition-all',
            selectedProvider === provider.id ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50'
          ]"
          @click="selectProvider(provider.id)">
          <div class="flex items-center justify-between mb-2">
            <div class="flex items-center">
              <i :class="[provider.icon, 'w-6 h-6 mr-3']" />
              <span class="font-medium text-foreground">{{ provider.name }}</span>
            </div>
            <div
              v-if="selectedProvider === provider.id"
              class="w-4 h-4 bg-primary rounded-full flex items-center justify-center">
              <i class="i-mdi-check w-3 h-3 text-primary-foreground" />
            </div>
          </div>
          <p class="text-sm text-muted-foreground">{{ provider.description }}</p>
        </div>
      </div>
    </div>

    <!-- API 配置 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-key-variant mr-2 w-5 h-5" />
        {{ t('settings.model.apiConfig') }}
      </h2>

      <div class="space-y-4">
        <div>
          <label class="block text-sm font-medium text-foreground mb-2">API Key</label>
          <div class="relative">
            <input
              v-model="apiConfig.apiKey"
              :type="showApiKey ? 'text' : 'password'"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              :placeholder="t('settings.model.apiKeyPlaceholder')" />
            <button
              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
              @click="showApiKey = !showApiKey">
              <i :class="showApiKey ? 'i-mdi-eye-off' : 'i-mdi-eye'" class="w-4 h-4" />
            </button>
          </div>
        </div>

        <div>
          <label class="block text-sm font-medium text-foreground mb-2">Base URL</label>
          <input
            v-model="apiConfig.baseUrl"
            type="url"
            class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
            placeholder="https://api.openai.com/v1" />
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label class="block text-sm font-medium text-foreground mb-2">{{ t('settings.model.timeout') }}</label>
            <input
              v-model.number="apiConfig.timeout"
              type="number"
              min="1"
              max="300"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              placeholder="30" />
          </div>

          <div>
            <label class="block text-sm font-medium text-foreground mb-2">{{ t('settings.model.maxRetries') }}</label>
            <input
              v-model.number="apiConfig.maxRetries"
              type="number"
              min="0"
              max="10"
              class="w-full px-3 py-2 border border-input rounded-lg bg-input-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
              placeholder="3" />
          </div>
        </div>
      </div>
    </div>

    <!-- 模型列表 -->
    <div class="bg-card rounded-lg p-6 border border-border">
      <h2 class="text-lg font-semibold text-foreground mb-4 flex items-center">
        <i class="i-mdi-robot mr-2 w-5 h-5" />
        {{ t('settings.model.availableModels') }}
      </h2>

      <div class="space-y-3">
        <div
          v-for="model in availableModels"
          :key="model.id"
          class="flex items-center justify-between p-3 border border-border rounded-lg hover:bg-muted/50 transition-colors">
          <div class="flex items-center">
            <i :class="[model.icon, 'w-5 h-5 mr-3 text-primary']" />
            <div>
              <div class="font-medium text-foreground">{{ model.name }}</div>
              <div class="text-sm text-muted-foreground">{{ model.description }}</div>
            </div>
          </div>
          <div class="flex items-center space-x-2">
            <span
              :class="[
                'px-2 py-1 text-xs rounded-full',
                model.status === 'available' ? 'bg-success/20 text-success' : 'bg-warning/20 text-warning'
              ]">
              {{ model.status === 'available' ? t('common.available') : t('common.limited') }}
            </span>
            <button
              class="px-3 py-1 text-sm bg-primary text-primary-foreground rounded hover:bg-primary/90 transition-colors">
              {{ t('common.test') }}
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="flex gap-3 pt-4">
      <button
        class="px-6 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
        @click="saveSettings">
        {{ t('common.save') }}
      </button>
      <button
        class="px-6 py-2 bg-secondary text-secondary-foreground rounded-lg hover:bg-secondary/90 transition-colors"
        @click="testConnection">
        {{ t('settings.model.testConnection') }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

import { t } from '@/i18n';

// 服务提供商
const providers = [
  {
    id: 'openai',
    name: 'OpenAI',
    icon: 'i-mdi-openai',
    description: t('settings.model.providers.openai')
  },
  {
    id: 'azure',
    name: 'Azure OpenAI',
    icon: 'i-mdi-microsoft-azure',
    description: t('settings.model.providers.azure')
  },
  {
    id: 'anthropic',
    name: 'Anthropic',
    icon: 'i-mdi-robot-outline',
    description: t('settings.model.providers.anthropic')
  },
  {
    id: 'custom',
    name: t('settings.model.providers.custom'),
    icon: 'i-mdi-cog-outline',
    description: t('settings.model.providers.customDesc')
  }
];

// 可用模型
const availableModels = [
  {
    id: 'gpt-4',
    name: 'GPT-4',
    description: t('settings.model.models.gpt4'),
    icon: 'i-mdi-brain',
    status: 'available'
  },
  {
    id: 'gpt-3.5-turbo',
    name: 'GPT-3.5 Turbo',
    description: t('settings.model.models.gpt35'),
    icon: 'i-mdi-flash',
    status: 'available'
  },
  {
    id: 'claude-3',
    name: 'Claude-3',
    description: t('settings.model.models.claude3'),
    icon: 'i-mdi-robot-happy',
    status: 'limited'
  }
];

// 选中的服务提供商
const selectedProvider = ref('openai');

// API配置
const apiConfig = ref({
  apiKey: '',
  baseUrl: 'https://api.openai.com/v1',
  timeout: 30,
  maxRetries: 3
});

// 是否显示API Key
const showApiKey = ref(false);

// 选择服务提供商
const selectProvider = (providerId: string) => {
  selectedProvider.value = providerId;
};

// 保存设置
const saveSettings = () => {
  console.log('保存模型服务设置:', {
    provider: selectedProvider.value,
    config: apiConfig.value
  });
  alert(t('common.success'));
};

// 测试连接
const testConnection = () => {
  console.log('测试连接...');
  alert(t('settings.model.testSuccess'));
};
</script>

<style scoped>
.model-service-settings {
  max-width: 1000px;
}
</style>
